let userphone = getCookie("login");
getCarData();


//获取数据
let total_num = document.querySelector(".total_num");
let subtract = document.querySelector(".subtract");
//数量
let count = document.querySelector(".count");
//加
let append = document.querySelector(".append");
//商品总价钱
let summation=document.querySelector(".summation");

//全选
let All_choose=document.querySelector(".All_choose");
let center_warpper=document.querySelector(".center_warpper");
let car_center=document.querySelector(".car_center");
let checked=document.querySelectorAll(".checked");

//事件委托(点击)
car_center.onclick=function(e){
    let data=JSON.parse(localStorage.getItem("carGoodsData"));

    //全选
    if(e.target.classList.contains("All_choose")){
        data.forEach((item)=>{
            item.is_select=e.target.checked?"1":"0";
        });

        localStorage.setItem("carGoodsData",JSON.stringify(data));
        calculationPrice();
        render();
    }

    //单选
    if(e.target.classList.contains("checked")){
        let id=e.target.getAttribute("data_id");
        data.forEach((item)=>{
            if(item.goods_id==id){
                item.is_select=e.target.checked?"1":"0";
            }
        });
        let flag=data.every((item)=>{
            return item.is_select=="1";
        });
        All_choose.checked=flag;
        localStorage.setItem("carGoodsData",JSON.stringify(data));
        calculationPrice();
        render();


    }

    //减操作
    if(e.target.classList.contains("subtract")){
        let id=e.target.getAttribute("data_id");
        let num=e.target.nextElementSibling.innerText*1-1;
        upcartData(data,id,num);
        
    }

    //加操作
    if(e.target.classList.contains("append")){
        let id=e.target.getAttribute("data_id");
        let num=e.target.previousElementSibling.innerText*1+1;
        upcartData(data,id,num);
    }

    //删除操作
    if(e.target.classList.contains("btn_goods")){
        let id=e.target.getAttribute("data_id");
        deleteData(data,id);
        render();
    }
}



//请求购物车的接口
async function getCarData() {
    let c = await pAjax({
        url: "/api/getCarData",
        type: "get",
        data: {
            userphone: userphone
        }
    });
    localStorage.setItem("carGoodsData",c);
    render();
}


//购物车数据渲染
function render() {
    let list_warpper = document.querySelector(".list_warpper");
    let data=JSON.parse(localStorage.getItem("carGoodsData"));
    list_warpper.innerHTML = data.map((item) => {
        return `<div class="list">
        <p>
        <input type="checkbox" data_id="${item.goods_id}" class="checked" ${item.is_select=="1"? "checked" :""}>
    </p>
    <p>
        <img src="${item.goods_img}" alt="">
    </p>
    <div class="list_content">
        <p>
            <span>${item.goods_name}</span>
            <span>￥${item.goods_price}</span>
        </p>
        <div class="content1">
            <p>${item.goods_color}</p>
            <p>${item.goods_size}码</p>
            <div class="con">
                <span>数量</span>
                <p>
                    <button data_id="${item.goods_id}" ${item.goods_num==1?"disabled":" "} class="subtract">-</button>
                    <a href="#">${item.goods_num}</a>
                    <button data_id="${item.goods_id}" class="append">+</button>
                </p>
            </div>
            <div class="btn">
                <button class="btn_goods" data_id="${item.goods_id}">删除</button>
            </div>
        </div>
    </div>
    </div>`
    }).join("");
}


//更新数据库和本地存储的商品数量
function upcartData(data,id,num){

    pAjax({
        url:"/api/upCart",
        data:{
            userphone:userphone,
            goods_id:id,
            goods_num:num,
        },
    }).then((res)=>{
        let {code,msg}=JSON.parse(res);
        if(!code){
            alert(msg);
            return;
        }
        //修改本地存储的数据
        data.forEach((item)=>{
            if(item.goods_id==id){
                item.goods_num=num;
            }
        });
        localStorage.setItem("carGoodsData",JSON.stringify(data));
        render();
        calculationPrice();
    })

}


//删除商品
function deleteData(data,id){
    pAjax({
        url:"/api/delectData",
        data:{
            userphone:userphone,
            goods_id:id
        }
    }).then((res)=>{
        let {code,msg}=JSON.parse(res);
        if(code){
            alert(msg);
            render();
        }
    });
    let content=data.filter((item)=>{
        return item.goods_id!=id;
    })
    localStorage.setItem("carGoodsData",JSON.stringify(content));
    calculationPrice();
}

//计算价格
function calculationPrice(){
    let data=JSON.parse(localStorage.getItem("carGoodsData"));
    console.log(data[0].goods_price.replace(",",""));
    
    let select_goods=data.filter((item)=>{
        return item.is_select=="1";
    });
    let total_goods=select_goods.reduce((pre,item)=>{
        return pre+item.goods_num*1;
    },0);

    let t_count=document.querySelector(".t_count");
    t_count.innerHTML="共"+total_goods+"件";

    let goods_price=select_goods.reduce((pre,item)=>{
        return pre+item.goods_num*item.goods_price.replace(",","")*1;
    },0);

    summation.innerHTML="￥"+goods_price.toFixed(2);
    console.log(goods_price);

}